<template>
  <Evaluation>
    <view class="homeContainer">
      <Swiper
        class="swiper"
        :modules="swiperModules"
        :effect="'coverflow'"
        :grab-cursor="true"
        :centered-slides="true"
        :slides-per-view="'auto'"
        :coverflow-effect="{
        rotate: 10,
        stretch: 0,
        depth: 150,
        modifier: 3,
        slideShadows: true
      }"
        :initial-slide="activeIndex"
        @slideChange="onSlideChange"
      >
        <swiper-slide @click="handelClick" :class="item.index == (activeIndex - 2 ) ? 'slide-prev-2':''" class="slide"
                      ref="swiperRef" v-for="item in bannerList" :key="item.index">
          <image :src="item.url"></image>
        </swiper-slide>
      </Swiper>
      <view class="beginBtn" @click="handelTest">
        开始测评
      </view>
    </view>
  </Evaluation>
</template>

<script setup lang="ts">
import {Pagination, EffectCoverflow} from 'swiper'

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';
import Evaluation from '@/components/evaluation/index.vue'
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import banner1 from '@/static/image/firstBanner.png'
import banner2 from '@/static/image/secondBanner.png'
import banner3 from '@/static/image/thirdBanner.png'
import banner4 from '@/static/image/fourthBanner.png'
import banner5 from '@/static/image/fifthBanner.png'
import {onLoad} from "@dcloudio/uni-app";
const router = useRouter()
const swiperModules = ref([Pagination, EffectCoverflow])

const route = useRoute()
const swiperRef = ref([])
const activeIndex = ref()
const bannerList = [
  {
    url: banner1,
    index: 0,
    isActive: true
  },
  {
    url: banner2,
    index: 1,
    isActive: false
  },
  {
    url: banner3,
    index: 2,
    isActive: false
  },
  {
    url: banner4,
    index: 3,
    isActive: false
  },
  {
    url: banner5,
    index: 4,
    isActive: false
  }
]
const routerList = {
  0:{
    url:'/pages/evaluation/evaluation',
    name:'第一环节'
  },
  1:{
    url:'/pages/accociationLink/accociationLink',
    name:'第二环节'
  },
  2:{
    url:'/pages/diagnoseLink/diagnoseLink',
    name:'第三环节'
  },
  3:{
    url:'/pages/porjectLink/porjectLink',
    name:'第四环节'
  }
}
const onSlideChange = (e) => {
  activeIndex.value = e.activeIndex
  bannerList.forEach((item) => {
    item.isActive = false
  })
  bannerList[e.activeIndex].isActive = true
}
const handelClick = (e) => {
  console.log(e, 'click')
}
onLoad((query) => {
  //#ifdef H5
  if (route.query.type) {
    activeIndex.value = Number(route.query.type)
    console.log(route.query.type)
    console.log(activeIndex.value)
  }
  //#endif
})
onMounted(() => {

  // if(route.query.type === 'begin'){
  //   activeIndex.value = 1
  // }else{
  //
  // }
})
const handelTest = () => {

  // #ifdef APP-PLUS
  uni.navigateTo({
    url: '/page'
  })
  // #endif
  // #ifdef H5
  router.push(`${routerList[activeIndex.value].url}`)
  // #endif
}
</script>


<style scoped lang="scss">
.beginBtn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5rpx;
  width: 125rpx;
  height: 37.11rpx;
  background-image: url('../../static/image/all_Btn.png');
  background-size: 100% 100%;
  margin-top: 15rpx;
  font-weight: 500;
  font-size: 10.92rpx;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  line-height: 37.11rpx;
}

.homeContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-top: 30rpx;
}

.swiper {
  height: 100%;
  width: 100%;

  .swiper-slide {
    width: 120rpx !important;
    height: 150rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
//
//::v-deep .swiper-wrapper {
//  transform: translate3d(-26.801px, 57px, 212px) !important;
//}
//
//::v-deep .swiper-slide-active {
//
//  transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) !important;
//}
//
//::v-deep .swiper-slide-next {
//  transform: translateX(30.1344px) translateZ(-97.49814px) rotateY(15deg) !important;
//}
//
//::v-deep .swiper-slide-prev {
//  transform: translate3d(calc(-113% - 0px), 0px, -142px) rotateX(0deg) rotateY(-13deg) rotateZ(0deg) scale(1) !important;
//  //transform: translateX(-30.1344px) translateZ(-97.49814px) rotateY(-15deg) !important;
//}
////
//.slide-prev-2 {
//  transform: translate3d(calc(-120% + -341px), calc(0px), calc(-600px)) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1) !important;
//  //transform: translateX(-36.266px) translateZ(-251.36px) rotateY(330deg) !important;
//}

//::v-deep .swiper-slide-next + .swiper-slide {
//  /* 这里添加你想要应用的样式 */
//  transform: translateX(44.734px) translateZ(-250.36px) rotateY(385deg) !important
//}
.swiper-slide-active {
  transform: translate3d(0px, 20rpx, 0px) rotateX(0deg) rotateY(0deg) scale(1.1) !important;
}

.swiper-slide-prev {
  transform: translate3d(-20rpx, 20rpx, -20rpx) rotateX(0deg) rotateY(-20deg) scale(1) !important;
  //transform: translate3d(0px, -2px, -450px) rotate3d(0, 15, 0, -60deg) !important;
}

.swiper-slide-next {
  transform: translate3d(20rpx, 20rpx, -20rpx) rotateX(0deg) rotateY(30deg) scale(1) !important;
}

.slide-prev-2 {
  transform: translate3d(-40rpx, 22rpx, -240px) rotate3d(0, -30, 0, 28deg) !important

}

.swiper-slide-next + .swiper-slide {
  /* 这里添加你想要应用的样式 */
  transform: translate3d(30rpx, 22rpx, -264px) rotateX(0deg) rotateY(32deg) !important
}

</style>
